<template>
  <div class="searchlist">
    <NavBar title="搜索结果列表" :path="path"></NavBar>
    <div class="loading">
      <!-- <van-loading type="spinner" v-if="bol" /> -->
      <van-loading size="24px" type="spinner" v-if="bol" vertical
        >加载中...</van-loading
      >
    </div>
    <div
      class="info"
      v-for="(item, index) in articleList"
      :key="index"
      @click="goArticledetails(item)"
    >
      <div class="up">
        <h3 class="title">
          {{ item.title }}
        </h3>
        <div class="image" v-if="item.cover.images.length > 0">
          <img :src="item.cover.images[0]" alt="" />
        </div>
      </div>
      <div class="down">
        <div class="author">{{ item.aut_name }}</div>
        <div class="comment">
          <span class="num">{{ item.comm_count }}</span
          >条评论
        </div>
        <div class="time">{{ item.pubdate }}</div>
        <van-icon size="10px" name="cross" class="icon" />
      </div>
    </div>
  </div>
</template>
<script>
import { searchDetails } from '../../api/search'
export default {
  data () {
    return {
      value: this.$route.params.value,
      articleList: '',
      bol: true,
      path: this.$route.query.formPath
    }
  },
  async created () {
    // console.log(this.value)
    // console.log(this.path)
    const res = await searchDetails({
      q: this.value
    })
    // console.log(res)
    this.bol = false
    this.articleList = res.data.data.results
  },
  methods: {
    goArticledetails (item) {
      //   console.log(item)
      this.$router.push({
        path: `/home/articledetails?id=${item.art_id}`,
        query: { path: this.$route.formPath }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.searchlist {
  .loading {
    text-align: center;
  }
  .info {
    padding: @p12;
    // display: flex;
    width: 100%;
    height: 100px;

    .up {
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 18px;
        height: 40px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .image {
        width: 150px;
        height: 60px;
        margin-left: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .down {
      display: flex;
      font-size: 12px;
      margin-top: 7px;
      position: relative;
      color: #6666;
      .comment {
        margin: 0 5px;
      }
      .hour {
        margin-left: 5px;
      }
      .icon {
        position: absolute;
        right: 0;
      }
    }
  }
}
</style>
